@if (!loading) {
  <div class="px-4 pt-4 pb-2 h-full flex flex-col">

    <div class="flex items-center">
      <h2 class="text-xl font-semibold">Review Metadata Proposal </h2>
    </div>

    <div class="flex-grow overflow-auto">
      @if (currentProposal?.metadataJson; as proposed) {
        <app-metadata-picker
          [fetchedMetadata]="proposed"
          [book$]="book$"
          (goBack)="close()"
          [reviewMode]="true">
        </app-metadata-picker>
      }
    </div>

    <p-divider/>

    <div class="flex justify-between items-center flex-wrap gap-2 pt-4">

      <div class="flex items-center gap-2 pl-1 group"
           pTooltip="{{ currentIndex + 1 }} of {{ proposals.length }} processed ({{ ((currentIndex + 1) / proposals.length * 100) | number: '1.0-0' }}%)"
           tooltipPosition="top">
        <p-progressBar
          [value]="((currentIndex + 1) / proposals.length) * 100"
          class="w-40 h-3 transition-all duration-300 ease-in-out group-hover:shadow-md"
          showValue="false">
        </p-progressBar>
        <span class="text-sm text-gray-300 font-medium tabular-nums whitespace-nowrap">
          Book {{ currentIndex + 1 }} / {{ proposals.length }}
        </span>
      </div>

      <div class="flex flex-wrap gap-2 justify-end">

        <p-button
          label="Close"
          icon="pi pi-times-circle"
          severity="secondary"
          [outlined]="true"
          (click)="close()">
        </p-button>

        <p-divider layout="vertical"/>

        <p-button
          label="Lock All"
          icon="pi pi-lock"
          severity="warn"
          [outlined]="true"
          (click)="lockAllMetadata()">
        </p-button>

        <p-button
          label="Unlock All"
          icon="pi pi-lock-open"
          severity="success"
          [outlined]="true"
          (click)="unlockAllMetadata()">
        </p-button>

        <p-divider layout="vertical"/>

        <p-button
          label="Accept & Save"
          icon="pi pi-check-circle"
          iconPos="right"
          severity="success"
          [outlined]="true"
          (click)="onSave(currentProposal!)">
        </p-button>

        <p-divider layout="vertical"/>

        <p-button
          [label]="isLast ? 'Finish & Close' : 'Next'"
          [icon]="isLast ? 'pi pi-check-circle' : 'pi pi-angle-right'"
          iconPos="right"
          severity="info"
          [outlined]="true"
          (click)="onNext()">
        </p-button>

      </div>
    </div>
  </div>
} @else {
  <div class="p-4 h-full flex items-center justify-center">
    <p-progressSpinner class="w-8 h-8" strokeWidth="4"></p-progressSpinner>
  </div>
}
